<!--
 * @Author: Bennty
 * @Date: 2024-11-22 14:28:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-23 14:34:37
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="新增供应商" width="35%" @close="handleClose" >
        <el-form ref="formRef" :model="formData" label-width="auto" >
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="单位全称" prop="companyName" align="left">
                        <el-input v-model="formData.companyName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位简称" prop="companySimpleName" align="left">
                        <el-input v-model="formData.companySimpleName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="单位地址" prop="companyAddress" align="left">
                <el-input v-model="formData.companyAddress" placeholder="请输入"></el-input>
            </el-form-item>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="单位电话" prop="phone" align="left">
                        <el-input v-model="formData.phone" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人姓名" prop="contactsName" align="left">
                        <el-input v-model="formData.contactsName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="contactsPhone" align="left">
                        <el-input v-model="formData.contactsPhone" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系微信" prop="contactsWeChat" align="left">
                        <el-input v-model="formData.contactsWeChat" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="单位属性" prop="supplyType" align="left">
                        <el-select v-model="formData.supplyType" placeholder="请输入">
                            <el-option value="1" label="供应商"></el-option>
                            <el-option value="2" label="外协厂"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="选择标签" prop="supplyLabel" align="left">
                        <el-select v-model="formData.supplyLabel" clearable multiple collapse-tags collapse-tags-tooltip filterable placeholder="请输入">
                            <el-option v-for="item in props.typeList" :key="item.id" :label="item.majorName" :value="item.majorType"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算方式" prop="paymentMethod" align="left">
                        <el-select v-model="formData.paymentMethod" @change="handleSelectMethod" clearable filterable placeholder="请输入">
                            <el-option v-for="item in props.settleAccounts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="交付周期" prop="deliveryCycle" align="left">
                        <el-input v-model.number="formData.deliveryCycle" type="number" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-show="showCycle">
                    <el-form-item label="付款周期" prop="paymentCycle" align="left">
                        <el-input v-model="formData.paymentCycle" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="对公账户" prop="publicAccount">
                <el-input v-model="formData.publicAccount" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="私人账户" prop="privateAccount">
                <el-input v-model="formData.privateAccount" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" type="textarea" placeholder="请输入" maxlength="125"  show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClickSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Form } from '@/api/sj/purchaseManagement/supplierManagement/types';
import type { FormInstance } from 'element-plus';
import { addSupplierApi } from '@/api/sj/purchaseManagement/supplierManagement';

const props = defineProps<{
    visible: boolean,
    formModel: Form,
    typeList: any[],
    settleAccounts: any[]
}>();
const emits = defineEmits(['close','submit']);
const formRef = ref<FormInstance>();
const formData = ref<Form>({});
const showCycle = ref(false);

watch(()=>props.formModel, (newData)=>{
    formData.value = newData;
}, {deep: true});

const handleSelectMethod = (value: string) => {
    if(value == '1'){
        showCycle.value = true;
    }else{
        showCycle.value = false;
        formData.value.paymentCycle = undefined;
    }
};

const handleClickSubmit = async () => {
    const submitData = {
        ...formData.value,
        supplyLabel: formData.value?.supplyLabel?.join(',')
    };
    const { code } = await addSupplierApi(submitData);
    if(code == 200){
        emits('submit', true);
        
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

</script>

<style lang="scss" scoped>

</style>